@import '../../css/index.less';

.classify{

    @footH: 100px;
    position: relative;
    padding-bottom: @footH;
    
    .top-bar{
        background: @bgColor;
    }
    
    .title{
        padding: 2*@interval @interval;
        font-size: @FStitleMd;
    }
    
    .total,
    .total-sub{
        padding: 0 @interval;
        background: @bgColor;
    }
    
    .total{
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;

        text-align: right;
        font-size: @FSdef;
        color: @fontColorSecent;
        
        .value{
            margin-left: 4px;
            font-weight: 600;
            font-size: @FStitlBg;
            color: @fontColor;    
            line-height: 1;
        }
        
    }

    .total-sub{
        margin-top: @interval;
        text-align: right;
        font-size: @FSsm;
        color: @fontColorSecent;

        .value{
            color: @fontColor;
        }
    }

    .remarks{
        margin-top: 2*@interval;
        padding: @interval;
        background: @bgColor;
    }

    .remarks-remind{
       
        display: flex;
        margin-bottom: 2*@interval;
        font-size: @FSdef;
        color: @fontColorSecent;

        .icon{
            margin-right: 6px;
            font-size: 42px;
        }
    }

    .footer{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        margin: auto;
        padding: 0 @interval 2*@interval;
        height: @footH;
        background: @bgColor;
        
        .total{
            background: transparent;
            color: @color_6;
        }
        
    }

}